<template>
  <div id="statistical">
    <div class="top">
      <div v-for="(item, index) in censusdata" :key="index">
        <div v-for="(rol, i) in item.items" :key="i" class="sum">
          <div class="name">
            <p>{{ rol.name }}</p>
          </div>
          <div class="value">
            <span>{{ rol.value }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div v-for="(item, index) in censusdata" :key="index">
        <div class="bottomo">
          <p v-for="(k, j) in item.ips" :key="j" class="ip">{{ k }}</p>
        </div>
      </div>
      <!-- <div class="bottomo">
        <p class="ip">10.13.4.01</p>
        <p class="ip">10.13.4.01</p>
        <p class="ip">10.13.4.01</p>
      </div> -->
    </div>
  </div>
</template>
<script>
export default {
  name: "Statistical",
  props: {
    censusdata: {
      type: Array,
      default: () => []
    }
  },
};
</script>
<style lang="less" scoped>
.top {
  width: 672px;
  height: 150px;
  margin-top: 35px;
  margin-left: 39px;
  display: flex;
}
.sum {
  flex-direction: row;
  justify-content: center;
  width: 200px;
  height: 135px;
  margin-right: 45px;
}
.name {
  width: 195px;
  height: 30px;
  font-size: 26px;
  color: #ffffff;
  text-align: center;
}
.value {
  width: 190px;
  height: 105px;
  font-size: 36px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
  line-height: 130px;
}
.bottom {
  width: 672px;
  height: 177px;
  margin-top: 72px;
  margin-left: 35px;
}
.bottomo {
  display: flex;
  width: 600px;
  height: 53px;
  padding-top: 3px;
  margin-left: 80px;
}
.ip {
  flex-direction: row;
  justify-content: flex-start;
  font-size: 22px;
  color: #c3c3c3;
  height: 30px;
  width: 33%;
}
</style>
